<template>
  <div id="SearchViewSingle">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.index" @click="playMusic(item)">
          <div class="singleItem">
            <van-row>
              <van-col span="23">
                <div style="height: 20px">{{ item.name }}</div>
                <div style="height: 20px; font-size: 12px">
                  {{ item.artists[0].name }}
                </div>
              </van-col>
              <van-col @click.stop="addPlayMusicList(item)" span="1" style="transform: rotate(90deg)"
                ><span
                  style="font-size: 20px"
                  class="bobafont bobamusic-gengduo"
                ></span
              ></van-col>
            </van-row>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { searchKeyWords } from "network/api/SearchViewApi";

export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      offset: 0,
      refreshing: false,
      hasMore: true,
    };
  },
  methods: {
    onLoad() {
      console.log("方法加载了");
      if (this.list.length >= 300) {
        this.loading = false;
        this.finished = true;
        return;
      }
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      searchKeyWords(this.curretKeyWord, this.offset, 1).then((res) => {
        res.data.result.songs.forEach((element) => {
          this.list.push(element);
        });
        console.log(res.data.result.hasMore);
        this.hasMore = res.data.result.hasMore;
        this.finished = !res.data.result.hasMore;
      });
      this.offset++;
      // 加载状态结束
      this.loading = false;
      console.log(this.list.length);
    },
    onRefresh() {
      setTimeout(() => {
        this.refreshing = false;
      }, 1000);
    },
    playMusic(item){
      this.$emit("playmusic", item)
    },
    addPlayMusicList(item){
      this.$emit("addmusiclist",item)
    }
  },
  computed: {
    curretKeyWord() {
      // 提前滞空数据
      this.list = [];
      return this.$store.state.keyWord;
    },
  },
  watch: {
    curretKeyWord(newV, oldV) {
      searchKeyWords(this.curretKeyWord, this.offset, 1).then((res) => {
        res.data.result.songs.forEach((element) => {
          this.list.push(element);
        });
        console.log(res.data.result.hasMore);
        this.hasMore = res.data.result.hasMore;
        this.finished = !res.data.result.hasMore;
      });
    },
  },
};
</script>

<style lang="less">
// 设置item样式
#SearchViewSingle > div > div > div.van-list > div > div {
  height: 40px;
}
#SearchViewSingle > div > div > div.van-list > div {
  &.van-list__loading {
    background-color: #fff;
  }
  &.van-list__finished-text {
    background-color: #fff;
  }
}
</style>